<template>
    <el-dialog title="选择接单人员（生产操作部）" :visible.sync="visible" width="800px" append-to-body @close="handleClose">
        <!-- 搜索框 -->
        <el-input v-model="searchKey" placeholder="请输入昵称/用户名搜索" prefix-icon="el-icon-search" class="search-input mb20"
            @input="handleSearch" />

        <!-- 用户列表表格 -->
        <el-table :data="filteredUserList" border height="400px" row-key="userId" @row-click="handleRowClick"
            :highlight-current-row="true">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="nickName" label="昵称" width="180" />
            <el-table-column prop="userName" label="用户名" width="180" />
            <el-table-column prop="phonenumber" label="手机号" width="180">
                <!-- 空手机号显示“未设置”，优化体验 -->
                <template #default="scope">
                    {{ scope.row.phonenumber || '未设置' }}
                </template>
            </el-table-column>
            <el-table-column prop="dept.deptName" label="所属部门" width="200" />
            <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                    <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                        {{ scope.row.status === '0' ? '正常' : '禁用' }}
                    </el-tag>
                </template>
            </el-table-column>
        </el-table>

        <!-- 空数据提示：适配“生产操作部无用户”的场景 -->
        <div v-if="filteredUserList.length === 0" class="empty-tip">
            <i class="el-icon-user-empty"></i>
            <p>{{ searchKey ? '未找到生产操作部匹配的用户' : '生产操作部暂无用户数据' }}</p>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="handleConfirm" :disabled="!selectedUser">
                确认选择
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import { listUser } from "@/api/system/user"

export default {
    name: "UserSelectDialog",
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            userList: [], // 原始用户列表（所有部门）
            filteredUserList: [], // 过滤后列表（仅生产操作部）
            searchKey: "", // 搜索关键词
            selectedUser: null, // 选中的用户
            targetDept: "生产操作部" // 目标部门：固定为“生产操作部”
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.init()
            } else {
                this.reset()
            }
        }
    },
    methods: {
        // 初始化组件
        init() {
            this.fetchUserList()
            this.searchKey = ""
            this.selectedUser = null
        },

        // 获取用户列表：新增“生产操作部”过滤
        fetchUserList() {
            listUser().then(res => {
                if (res.code === 200) {
                    // 1. 先过滤出“生产操作部”的用户（核心过滤）
                    this.userList = res.rows.filter(user =>
                        user.dept && user.dept.deptName === this.targetDept
                    ) || [];
                    // 2. 初始化过滤列表（默认显示所有生产操作部用户）
                    this.filteredUserList = [...this.userList];
                } else {
                    this.$modal.msgWarning("获取用户列表失败")
                }
            }).catch(err => {
                console.error("获取用户列表失败：", err)
                this.$modal.msgError("获取用户列表失败，请稍后重试")
            })
        },

        // 搜索用户：叠加“生产操作部”+“关键词匹配”
        handleSearch() {
            if (!this.searchKey) {
                // 无搜索关键词时，显示所有生产操作部用户
                this.filteredUserList = [...this.userList];
                return;
            }
            const key = this.searchKey.toLowerCase();
            // 2. 有搜索关键词时：同时满足“生产操作部”和“昵称/用户名匹配”
            this.filteredUserList = this.userList.filter(user => {
                const nickName = (user.nickName || '').toLowerCase();
                const userName = (user.userName || '').toLowerCase();
                // 关键词匹配（昵称/用户名）
                const matchSearch = nickName.includes(key) || userName.includes(key);
                // 部门匹配（已在fetch时过滤，这里可省略，但保留更严谨）
                const matchDept = user.dept && user.dept.deptName === this.targetDept;
                return matchDept && matchSearch;
            });
        },

        // 行点击事件：仅允许选择“正常”状态的用户（优化）
        handleRowClick(row) {
            if (row.status === '0') { // 仅“正常”状态用户可选中
                this.selectedUser = row;
            } else {
                this.$modal.msgWarning("仅正常状态的用户可选择");
            }
        },

        // 确认选择
        handleConfirm() {
            if (!this.selectedUser) {
                this.$modal.msgWarning("请选择生产操作部的用户")
                return
            }
            this.$emit("select", this.selectedUser)
            this.visible = false
        },

        // 关闭对话框
        handleClose() {
            this.reset()
            this.$emit("update:visible", false)
        },

        // 重置状态
        reset() {
            this.searchKey = ""
            this.selectedUser = null
            this.filteredUserList = []
        }
    }
}
</script>

<style scoped>
.search-input {
    width: 300px;
}

.mb20 {
    margin-bottom: 20px;
}

/* 空数据提示：居中+柔和样式，避免表格空白 */
.empty-tip {
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #86909c;
}

.empty-tip i {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.6;
}

.empty-tip p {
    font-size: 14px;
}
</style>